<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>封面图生成 · SeedDream 4.0</title>
    <link rel="stylesheet" href="/static/style.css" />
  </head>
  <body>
    <header>
      <h1>封面图生成（SeedDream 4.0）</h1>
      <p class="sub">仅使用 Doubao SeedDream 4.0，支持 1K–4K 分辨率</p>
      <p style="margin-top:8px"><a href="/">返回简单模式</a> · <a href="/workflow">进入 16:9 工作流</a></p>
    </header>

    <main>
      <section class="panel">
        <form action="/cover-image" method="post" class="form">
          <label for="prompt">提示词</label>
          <textarea id="prompt" name="prompt" rows="4" placeholder="例如：Cinematic cover art ..." required>{{ prompt_value or '' }}</textarea>

          <div class="row">
            <label for="ratio">纵横比</label>
            <select id="ratio" name="ratio">
              <option value="16:9" {% if (ratio_value or '') == '16:9' %}selected{% endif %}>16:9（封面推荐）</option>
              <option value="9:16" {% if (ratio_value or '') == '9:16' %}selected{% endif %}>9:16</option>
              <option value="1:1" {% if (ratio_value or '') == '1:1' %}selected{% endif %}>1:1</option>
              <option value="4:3" {% if (ratio_value or '') == '4:3' %}selected{% endif %}>4:3</option>
              <option value="3:2" {% if (ratio_value or '') == '3:2' %}selected{% endif %}>3:2</option>
            </select>
          </div>

          <div class="row">
            <label for="resolution">分辨率</label>
            <select id="resolution" name="resolution">
              <option value="1280x720" {% if (resolution_value or '') == '1280x720' %}selected{% endif %}>1K · 1280×720</option>
              <option value="1920x1080" {% if (resolution_value or '') == '1920x1080' %}selected{% endif %}>2K · 1920×1080</option>
              <option value="2880x1620" {% if (resolution_value or '') == '2880x1620' %}selected{% endif %}>3K · 2880×1620</option>
              <option value="3840x2160" {% if (resolution_value or '') == '3840x2160' %}selected{% endif %}>4K · 3840×2160</option>
            </select>
          </div>

          <button type="submit">生成封面图</button>
        </form>

        {% if error %}
        <div class="error" style="margin-top:10px">{{ error }}</div>
        {% endif %}
      </section>

      {% if images and images|length > 0 %}
      <section class="panel">
        <h2>生成结果</h2>
        <div class="grid">
          {% for url in images %}
          <figure class="card">
            <img src="{{ url }}" alt="生成图片" loading="lazy" />
            <figcaption>{{ url }}</figcaption>
          </figure>
          {% endfor %}
        </div>
      </section>
      {% endif %}
  </main>
    <div id="lightbox" class="lightbox" aria-hidden="true">
      <button class="lb-close" aria-label="关闭">×</button>
      <img src="" alt="预览图" />
    </div>
    <script src="/static/lightbox.js"></script>
  </body>
  </html>
